# Component: Lightbox

Full-screen media viewer with gallery thumbnails

Overlay Block

### BEM Anatomy

| Type      | Class Name        | Description                                                                        |
| --------- | ----------------- | ---------------------------------------------------------------------------------- |
| ==Block== | `.as-lightbox`    | The overlay container. Defaults to `opacity: 0` and `height: 0` to stay hidden.    |
| Modifier  | `--active`        | Triggers visibility. Sets `z-index: 1060`, `opacity: 1`, and full viewport height. |
| Element   | `__viewport`      | The central area for the main image and its caption.                               |
| Element   | `__thumbs`        | Vertical sidebar for gallery thumbnails. Hidden on mobile, flex-column on `sm`+.   |
| Element   | `__thumb-wrapper` | Individual thumbnail container. Modifiers: `--active` for the current selection.   |
| Element   | `__close`         | The exit button, absolute-positioned to the top-right.                             |

### State & Transitions

The Lightbox uses a sophisticated transition logic to ensure the element doesn't capture clicks when inactive, while still supporting smooth opacity fades.

##### Generated HTML (Gallery Active)

```html
<div class="as-lightbox as-lightbox--active" tabindex="0">
    <div class="as-lightbox__viewport">
        <img src="..." class="as-lightbox__image" alt="..." />
        <div class="as-lightbox__caption">
            <h3 class="as-lightbox__title">Mountain Vista</h3>
        </div>
    </div>
    <div class="as-lightbox__thumbs">
        <div class="as-lightbox__thumbs-row">
            <div class="as-lightbox__thumb-wrapper as-lightbox__thumb-wrapper--active">
                <div class="as-lightbox__thumb-img" style="background-image: url(...)"></div>
            </div>
        </div>
    </div>
    <button class="as-lightbox__close">...</button>
</div>
```

##### SCSS

```scss
.as-lightbox {
  // Inactive state: delay z-index change until fade is done
  transition: opacity 250ms ease-in-out, z-index 0ms 250ms;
  opacity: 0;
  z-index: -1;

  &--active {
    // Active state: immediate z-index, smooth opacity
    z-index: 1060;
    opacity: 1;
    transition: opacity 250ms ease-in-out;
  }
}
```
